<template>
	<view>
		<u-navbar back-text="发起群聊">
	    <view class="navbar-right" slot="right">
	    	<button type="default" plain="true" size="mini" class="btn-apply" @click="save">确定</button>
	    </view>
	  </u-navbar>
	  
	  <view class="select-mem-wrap">
	    <view v-for="(item, key) in friends" :key="item.account">
	      <u-avatar v-show="item.check" :src="item.avatar" class="ava" mode="square" size="80"></u-avatar>
	    </view>
	  </view>
	  
	  <u-index-list :scrollTop="scrollTop" :sticky="false">
	  	<view v-for="letter in indexKey" :key="letter">
	      <u-index-anchor :index="letter" />
	      <view v-for="(item, index) in friendObj[letter]" :key="item.link">
	        <view class="wrap">
	          <u-row gutter="16" @click="choose(item.account)">
	            <u-checkbox v-model="item.check" shape="circle"></u-checkbox>
	            <u-avatar :src="item.avatar" class="ava" mode="square" size="80"></u-avatar>
	            <view span="3">
	              <view class="list-cell">
	                {{item.alias}}
	              </view>
	            </view>
	          </u-row>
	        </view>
	      </view>
	  	</view>
	  </u-index-list>
	</view>
</template>

<script>
	import {mapState } from 'vuex'
	export default {
		data () {
			return {
				friends: {},
				scrollTop: 0,
				friendObj: {},
				chooseFriend: []
			}
		},
		computed: {
		  ...mapState({
		    indexKey: function (state) {
		      const obj = {}
		      const keys = []
		      state.app.userInfos.map(item => {
		        item.alias = item.nick || item.account;									// 设置显示的昵称
		        item.link = `/pages/index/chat?id=p2p-${item.account}`;					// 设置聊天界面跳转的链接
		        item.letter = pinyinUtil.getFirstLetter(item.alias)[0].toUpperCase(); 	// 获取拼音首字母
		        item.check = false
				
		        if (!obj[item.letter]) {
		          obj[item.letter] = []
		        }
		        obj[item.letter].push(item);
		        
		        if (keys.indexOf(item.letter) === -1) {
		          keys.push(item.letter)
		        }
				
				this.friends[item.account] = item;
		      })
			  
		      keys.sort()
		      this.friendObj = obj;      
		      return keys;
		    },
		    userInfos: (state) => {
		      return state.contact.userInfos
		    },
		    sysmsgUnread: (state) => {
		      return state.app.sysmsgUnread
		    },
			myInfo: (state) => state.app.myInfo
		  })
		},
		methods: {
			choose(account) {
				this.friends[account].check = !this.friends[account].check
				this.$forceUpdate()
				// this.friends = {...this.friends}
			},
			save() {
				
				let accounts = []
				for( const key in this.friends) {
					if (this.friends[key].check) {
						accounts.push(this.friends[key].account)
					}
				}
				
				// 如果type=2，调用SDK添加群成员方法
				if (this.type == 2) {
					window.nim.addTeamMembers({
						teamId: this.teamId,
						accounts,
						ps: '',
						custom: '',
						done: (error, obj) => {
							uni.navigateBack()
							this.$store.dispatch('app/getTeamMembers', this.teamId)
						}
					})
				} else {
				
					// else 调用SDK创建群聊方法				
					window.nim.createTeam({
						type: 'normal',
						name: `${this.myInfo.nick}发起的群聊`,
						avatar: '',
						accounts: accounts,
						ps: '我建了一个普通群',
						done: (error, obj) => {
							
						}
					})
				}
			}
		},
		onLoad: function (option) {
		  this.type = option.type;
		  this.teamId = option.teamId;
		}
	}
</script>

<style scoped lang="scss">
  .wrap {
    padding: 10rpx 20rpx;
  }
  .ava {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }
  .navbar-right {
  	display: flex;
  	align-items: center;
  	padding: 0 20rpx;
    .btn-apply {
      color: #18B566;
      border: 0rpx;
      background: #eee;
    }
  }
  .select-mem-wrap {
    display: flex;
    padding: 20rpx;
    flex-wrap: wrap;
    min-height: 126rpx;
  }
</style>
